<template>
<div>
  <h2>循环渲染指令</h2>
 <ul>
  <!--<li>下标 -- id -- 姓名 -- 绰号</li>  -->
  <!-- 循环遍历的时候，必须加:key 属性，属性值不能重复 -->
  <li v-for="(item,index) in list" :key="item.id">
    <input type="checkbox">
    {{index}} -- {{item.id}} -- {{item.name}} -- {{item.nickname}}
    <button @click="del(item.id)">删除</button>
  </li>
 </ul>
</div>
</template>

<script>
export default {
  data(){
    return{
      list: [
        { id: 200, name: '宋江', nickname: '及时雨' },
        { id: 400, name: '吴用', nickname: '智多星' },
        { id: 528, name: '林冲', nickname: '豹子头' }
      ]
    }
  },
  methods:{
    del(id){
      //从 this.list中删除一条数据
      this.list = this.list.filter(item=>{
        return item.id !== id
      })
    }
  }
}
</script>

<style>

</style>